<template>
  <view class="mytotal">
    <view class="checkall">
      <radio @click="changeAll" :checked="isCheckAll" color="#c00000" />全选
    </view>
    <view class="total">
      合计：<text>￥{{ total_price }}</text>
    </view>
    <view class="btn">
      <button @click="pay" size="mini">结算（{{ total }}）</button>
    </view>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: "my-total",
    computed: {
      ...mapState('cart', ['cart']),
      ...mapGetters('cart', ['total', 'isCheckAll', 'total_price']),
      ...mapState('user', ['address', 'token']),
      ...mapGetters('user', ['fullAddress'])
    },
    data() {
      return {
        // 倒计时的秒数
        seconds: 3,
        // 定义一个定时器
        timer: null
      }
    },
    methods: {
      ...mapMutations('cart', ['changeAllStatus', 'setCart']),
      ...mapMutations('user', ['setRedirectInfo']),
      // 修改所有商品的状态
      changeAll() {
        this.changeAllStatus(!this.isCheckAll)
      },
      // 支付（结算）
      async pay() {
        // 判断是否选中的商品
        if (this.total <= 0) return uni.$showMsg('必须要选中商品')
        // 判断是否存在收货地址
        if (!this.address.userName) return uni.$showMsg('收货地址不能为空')
        // 判断用户是否登录
        // if (!this.token) return uni.$showMsg('必须先登录')
        if (!this.token) return this.delayNavigate()
        // 1.0 创建订单
        //  得到商品列表
        let goodsArr = this.cart.filter(item => item.goods_status).map(item => {
          return {
            goods_id: item.goods_id,
            goods_number: item.goods_count,
            goods_price: item.goods_price
          }
        })
        let orderObj = {
          order_price: this.total_price, // 商品的总价
          consignee_addr: this.fullAddress, // 收货地址
          goods: goodsArr
        }
        //  请求接口
        const {
          data: res
        } = await uni.$http.post('/api/public/v1/my/orders/create', orderObj)
        if (res.meta.status !== 200) return uni.$showMsg()
        let order_number = res.message.order_number
        // 2.0 订单预支付
        const {
          data: orderRes
        } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
          order_number: order_number
        })
        if (orderRes.meta.status !== 200) return uni.$showMsg()
        const payObj = orderRes.message.pay
        // 3.0 发起支付
        const [err, payRes] = await uni.requestPayment(payObj)
        if (err) return uni.$showMsg('支付失败')
        if (payRes.errMsg !== "requestPayment:ok") return uni.$showMsg('支付失败')
        // 说明支付成功
        uni.showToast({
          title: '支付成功',
          icon: 'success'
        })
        // 4.0 将购物车中已经支付的商品清除
        const endCart = this.cart.filter(item => !item.goods_status)
        this.setCart(endCart)
      },
      // 三秒后跳转到登录页面
      delayNavigate() {
        // 将时间进行重置
        this.seconds = 3
        // 显示倒计时
        this.showTips(this.seconds)
        // 设置定时器
        this.timer = setInterval(() => {
          this.seconds--
          // 判断时间
          if (this.seconds <= 0) {
            // 清除定时器
            clearInterval(this.timer)
            // 跳转到登录页面
            return uni.switchTab({
              url: '/pages/me/me',
              complete: () => {
                // 将当前页面的信息保存到返回页面对象中
                this.setRedirectInfo({
                  openType: 'switchTab',
                  from: '/pages/cart/cart'
                })
              }
            })
          }
          // 再次显示倒计时
          this.showTips(this.seconds)
        }, 1000)
      },
      // 倒计时的方法
      //  n：倒计时显示的秒数
      showTips(n) {
        uni.showToast({
          title: `您还未登录,${n}秒后跳转到登录页面`,
          icon: 'none',
          duration: 2000
        })
      }
    }
  }
</script>

<style lang="scss">
  .mytotal {
    background-color: #eee;
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    position: fixed;
    z-index: 999;
    bottom: 0px;
    left: 0px;

    .checkall {}

    .total {
      text {
        color: #c00000;
      }
    }

    .btn {
      button {
        height: 40px;
        line-height: 40px;
        background-color: #c00000;
        color: #fff;
        border-radius: 0;
        font-size: 14px;
      }
    }
  }
</style>
